<template>
  <div class="user-profile">
    <van-nav-bar class="page-nav-bar" @click-left="$router.back()" title="个人信息" left-arrow />
    <van-cell-group>
      <van-cell class="photo-cell" title="头像" is-link>
        <van-image
          round
          class="avatar"
          fit="cover"
          :src="user.photo"
        />
      </van-cell>
      <van-cell title="昵称" @click="updateNameBool=true" :value="user.name" is-link />
      <van-cell title="性别" :value="user.gender === 1 ? '女' : '男'" is-link />
      <van-cell title="生日" :value="user.birthday" is-link />
    </van-cell-group>
    <!-- 修改昵称弹出层 -->
    <van-popup v-model="updateNameBool" position="bottom" style="height: 100%">
        <update-name v-model="user.name" @close="updateNameBool=false"></update-name>
    </van-popup>
  </div>
</template>

<script>
// 导入获取当前用户资料请求接口
import { getUserModifyInfo } from '@/api/users'
// 导入修改用户昵称组件
import UpdateName from './components/update-name'
export default {
  name: 'UserIndex',
  components: {
    'update-name': UpdateName
  },
  data () {
    return {
      // 当前用户个人资料
      user: {},
      updateNameBool: false /* 控制修改昵称弹出层 */
    }
  },
  created () {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo () {
      try {
        const { data } = await getUserModifyInfo()
        this.user = data.data
      } catch (err) {
        console.dir()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.user-profile {
  /deep/.van-nav-bar__arrow {
    color: #fff;
  }
  .avatar {
    width: 60px;
    height: 60px;
  }

  .van-popup {
    background-color: #f5f7f9;
  }

  .photo-cell {
    .van-cell__value {
      display: flex;
      flex-direction: row-reverse;
    }
  }
}

</style>
